import React, { Component } from "react";
import { NavBar, Carousel, Flex } from "antd-mobile";
import SearchInput from "../searchInput/SearchInput";
import "./index.css";
import myaxios from "../../untils/myaxios";
import { withRouter } from "react-router-dom";

class Index extends Component {
  componentDidMount() {
    // 首页轮播图数据
    myaxios.get("/home/swiperdata").then((res) => {
      //console.log(res);
      this.setState({
        swiper_list: res,
      });
    });
    // 首页导航的数据
    myaxios.get("/home/catitems").then((res) => {
      this.setState({
        sortItems: res,
      });
    });
    //首页列表的数据
    myaxios.get("/home/floordata").then((res) => {
      this.setState({
        productDat: res,
      });
    });
  }
  swiperHandle = (goods_id) => {
    this.props.history.push("/goodsDetail/" + goods_id);
  };
  sortItemsHandle = () => {
    this.props.history.push("/category");
  };
  state = {
    swiper_list: [],
    imgHeight: 170,
    sortItems: [], //首页分类数据
    productDat: [], //图片列表的数据
  };
  render() {
    let { swiper_list, sortItems, productDat } = this.state;
    return (
      <div className="yg-index">
        {/* 首页导航条 */}
        <div className="yg-index-nav">
          <NavBar className="index-nav">优购商城</NavBar>
        </div>
        {/* 首页搜索框 */}
        <div className="yg-index-search">
          <SearchInput />
        </div>
        {/* 首页轮播图开始 */}
        <div className="yg-index-swiper">
          <Carousel autoplay={true} infinite>
            {swiper_list.map((val) => (
              <a
                key={val.goods_id}
                style={{
                  display: "inline-block",
                  width: "100%",
                  height: this.state.imgHeight,
                }}
                onClick={this.swiperHandle.bind(this, val.goods_id)}
              >
                <img
                  src={val.image_src}
                  alt=""
                  style={{ width: "100%", verticalAlign: "top" }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </div>
        {/* 首页分类导航 */}
        <div className="yg-index-sortItems">
          <div className="sortItems-item">
            <Flex>
              {sortItems.map((v) => {
                return (
                  <Flex.Item
                    key={v.image_src}
                    onClick={this.sortItemsHandle}
                    className="sortItem"
                  >
                    <img src={v.image_src} style={{ height: "1.6rem" }} />
                  </Flex.Item>
                );
              })}
            </Flex>
          </div>
        </div>
        {/* 首页图片列表开始 */}
        <div className="yg-index-productData">
          {productDat.map((v) => {
            return (
              <div key={v.image_src}>
                {/* 图片列表标题 */}
                <div className="product-tit">
                  <img src={v.floor_title.image_src} alt="" />
                </div>
                {/* 图片列表详情 */}
                <div className="product-image-list">
                  {v.product_list.map((v2) => {
                    return (
                      <div className="img-list-item" key={v2.image_src}>
                        <img src={v2.image_src} alt="" />
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
export default withRouter(Index);
